<template>

  <div class="top">
    <h2>项目详情</h2>
    <el-row>
      <el-col :span="8">
        <img
            :src="ddetail.adetailimg"
            alt="Image" style="width: 100%;"/>
      </el-col>
      <el-col :span="14" style="padding: 20px">

        <h3>{{ ddetail.atitle }}</h3>
        <p>{{ ddetail.asubhead }}</p>
        <el-progress :percentage="(ddetail.anowmoney/ddetail.aneedmoney)*100"/>
        <div class="col">
          <p>捐款人数：{{ ddetail.acount }} &nbsp;&nbsp;</p>
          <p>已筹款：{{ ddetail.anowmoney }} &nbsp;&nbsp;</p>
          <p>目标金额：{{ ddetail.aneedmoney }} &nbsp;&nbsp;</p>
        </div>
        <div class="mon">
          <p>请选择金额</p>
          <div class="mon-v">
            <el-form :model="input_money" :rules="moneyRules" ref="dmoneyRef">
              <el-radio-group v-model="input_money">
                <el-radio label="10" size="large" border>10元</el-radio>
                <el-radio label="20" size="large" border>20元</el-radio>
                <el-radio label="50" size="large" border>50元</el-radio>
                <el-radio label="100" size="large" border>100元</el-radio>
              </el-radio-group>

              <div class="input_left">
                <el-col :span="10">

                  <el-input v-model="input_money" placeholder="请输入其他金额">

                  </el-input>
                </el-col>
              </div>
              <div class="button">
                <el-button type="warning" round @click="add">我要捐款</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

  <div class="detail">

    <div v-html="ddetail.adetail" class="deal"></div>
<!--    <img-->
<!--        src="https://cdn.cnbj1.fds.api.mi-img.com/charity-static-file/res/img/20230801/070ae18731c24e388e3e0ab08439e38d.jpg"-->
<!--        alt="Image" style="width: 100%;"/>-->
    <p></p>
  </div>
</template>


<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "AsstanceDetail",
  data() {
    return {
      ddetail: {},
      aid: 1,
      input_money: '',


    }
  },
  methods: {
    add() {
      this.$checkLogin()

      doThis.doGet("/assisder/insert", {aomoney: this.input_money, aid: this.aid}).then(res => {
        if (res.code === '0') {
          window.open(res.data)
        } else {
          // alert("添加失败，请检查输入是否正确")
          ElMessage.error('加失败，请检查输入是否正确')
        }
        setTimeout(() => {
          this.dialog = false
          this.input_money = ''
        }, 5000)
      })
    }
},
mounted()
{
  this.aid = this.$route.params.aid
  doThis.doGet("/asstance/findId", {aid: this.aid}).then(res => {
    console.log(res.data)
    this.ddetail = res.data
  })
}
}
</script>

<style scoped>
.top {
  width: 1200px;
  margin: 0 auto;

}

.col {
  height: 30px;
  display: flex;
  flex-wrap: wrap;

}


.mon-v {
  display: flex;
  flex-wrap: nowrap;


}

.detail {
  width: 1200px;
  margin: 0 auto;
}

.input_left {
  position: relative;
  left: 450px;
  top: -35px;
}
.deal{
  margin: 0 30px;
}
</style>